<template>
    <el-dialog
        :visible.sync="dialogVisible"
        title="批量修改商品价格"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="400px"
    >
        <div style="margin-bottom: 20px;">
            普通价格增加类型：
            <el-radio-group v-model="calcType" @change="radioChange">
                <el-radio label="1">按固定值加</el-radio>
                <el-radio label="2">按比率加</el-radio>
            </el-radio-group>

            <div v-if="calcType == 1" style="margin-bottom: 10px;">普通价格增加金额，如批发价优惠10，则：原价=批发价+10，此处应填写10</div>
            <div v-else="calcType == 2" style="margin-bottom: 10px;">批发价优惠比率，如批发价优惠5%，则：原价=批发价*(1+0.05)，此处应填写0.05</div>
            <el-input v-model="priceRange"/>
        </div>

        <el-upload
            ref="uploadRef"
            :auto-upload="false"
            :http-request="httpRequest"
            :multiple="false"
            :on-exceed="handleExceed"
            limit="1"
        >
            <template #trigger>
                <el-button type="primary">选择文件</el-button>
            </template>

            <el-button type="success" style="margin-left:30px;" @click="submitUpload">
                上传
            </el-button>

            <template #tip>
                <div class="el-upload__tip">
                    可支持.xlsx文件
                </div>
            </template>
        </el-upload>
    </el-dialog>
</template>

<script>
import {GoodsApi} from '@/api/mall/goods'
import {Message} from 'element-ui'

export default {
    name: 'BatchUpdateGoodsPrice',
    components: {},
    data() {
        return {
            priceRange: 0,
            fileList: [],
            dialogVisible: false,
            calcType: '1'
        }
    },

    methods: {
        // 显示组件
        showUpdate() {
            this.dialogVisible = true
        },

        handleExceed(files) {
            Message({
                message: '仅支持单个文件上传，请删除后再添加',
                type: 'warning'
            })

            return false
        },
        radioChange(e) {
            this.calcType = e
        },
        // 提交表单
        submitUpload() {
            this.$refs['uploadRef'].submit()
        },

        httpRequest(fileObj) {
            const that = this
            const formData = new FormData()
            formData.append('goodsPriceFile', fileObj.file)
            formData.append('priceRange', this.priceRange)
            formData.append('calcType', this.calcType)

            const loading = this.$loading({
                lock: true,
                text: '文件上传中，请稍后...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            GoodsApi.batchUpdateGoodsPrice(formData).then((response) => {
                that.dialogVisible = false
                loading.close();
                that.$emit('refresh')
            })
        }

    }
}
</script>

<style>
</style>
